<template>
  <movable-area class="page-scroll">
    <scroll-view class="scroll-y" scroll-y="true">
      <uni-list>
        <template v-for="(item,index) in list">
          <uni-list-item :key="index" clickable thumb-size="lg">
            <template slot="header" @click="del(item)">
              <view class="list-info">
                <view class="companyName"> {{item.companyName}}</view>
                <view class="companyPosition">职业： {{item.companyPosition}}
                  <span class="annualIncome">收入：{{item.annualIncome}}元</span>
                </view>
                <view class="companyAddress">地址： {{item.companyAddress}}</view>
              </view>
            </template>
            <template slot="footer">
              <uni-icons type="compose" @click.stop="edit(item)" size="24" color="#3487D3"></uni-icons>
            </template>
          </uni-list-item>
        </template>
      </uni-list>
      <view v-if="list.length===0" class="noData">暂无数据</view>
    </scroll-view>
    <movable-view :x="x" :y="y" direction="all" inertia class="icons" @tap.stop="add()">
      <uni-icons type="plus-filled" size="50" color="#ED7467"></uni-icons>
    </movable-view>
    <uni-popup ref="popup" type="center">
      <view class="popupView">
        <view class="prompt">新增/修改单位</view>
        <view class="cell">
          <view class="title">
            <input maxlength="10" v-model="form.companyName" placeholder="请输入公司名称" />
          </view>
        </view>
        <view class="cell">
          <view class="title">
            <input maxlength="200" v-model="form.companyPosition" placeholder="请输入工作职位" />
          </view>
        </view>
        <view class="cell">
          <view class="title">
            <input type="number" v-model="form.annualIncome" placeholder="请输入年收入(元)" />
          </view>
        </view>
        <view class="hr"></view>
        <view class="cell" @tap="chooseAdress">
          <viwe class="cell-left">经纬度</viwe>
          <viwe class="cell-right">
            <view>{{form.companyLangitude||'请选择'}}{{','+form.companyLatitude}}</view>
            <uni-icons type="arrowright" size="16" color="#b7c5dd"></uni-icons>
          </viwe>
        </view>
        <view class="botton popupBotton">
          <button class="botton-botton" @click="addTag()">提交</button>
        </view>
      </view>
    </uni-popup>
  </movable-area>
</template>
<style lang="scss" scoped>
.companyName {
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
}
.companyPosition {
  font-size: 16px;
}
.annualIncome {
  font-size: 12px;
  color: #96968e;
  padding-left: 30px;
}
.companyAddress {
  padding-top: 10px;
  font-size: 12px;
  color: #808080;
}
.page-scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .icons {
    width: 50px;
    height: 50px;
    z-index: 9999;
  }
}
.popupView {
  padding: 10px 3vw;
  width: 80vw;
  border-radius: 4px;
  overflow: auto;
  background: #fff;
}

.botton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  &-botton {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 20px;
    width: 35vw;
    color: #fff;
    background: #ed7467;
  }
}
.popupBotton {
  background: #fff;
}
.prompt {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  padding: 20px 0;
}
.hr {
  background: #ddd;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
.cell {
  width: 100%;
  padding: 10px;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-left {
    font-size: 16px;
    font-weight: bold;
    color: #000;
  }
  &-right {
    display: flex;
    font-size: 16px;
    color: #96968e;
    align-items: center;
    .uni-icons {
      padding-left: 5px;
    }
  }
  .title {
    height: 45px;
    width: 100%;
    background: #f6f6f6;
    border-radius: 10px;
    font-weight: bold;
    input {
      width: 100%;
      height: 100%;
      padding-left: 10px;
    }
  }
}
</style>


<script>
let id = ""
export default {
  data() {
    return {
      list: [],
      x: 500,
      y: 1000,
      form: {
        companyName: '',
        companyPosition: '',
        annualIncome: '',
        companyAddress: '',
        companyLangitude: '',
        companyLatitude: '',
        id: ''
      }
    }
  },
  onLoad(e) {
    id = e.id
    this.getTagList()
  },
  methods: {
    getTagList() {
      let _this = this
      _this.$post('/sale/wx/business_company/get_datas', { customerId: id }, true).then(res => {
        if (res.code * 1 === 200) {
          _this.list = res.data.row
        }
      })
    },
    add() {
      this.form = this.$options.data().form
      this.$refs.popup.open()
    },
    edit(row) {
      console.log(row);
      const { companyName, companyPosition, annualIncome, companyAddress, companyLangitude, companyLatitude, id } = row
      this.form = { companyName, companyPosition, annualIncome, companyAddress, companyLangitude, companyLatitude, id }
      this.$refs.popup.open()
    },
    del(e) {
      const _this = this
      uni.showModal({
        title: '警告',
        content: '本次操作将要该客户单位',
        success: function (res) {
          if (res.confirm) {
            _this.$post('/sale/wx/business_company/delete_data', { id: e.id }, true).then(res => {
              if (res.code * 1 === 200) {
                _this.getTagList()
                uni.showToast({
                  icon: "none",
                  title: "删除成功",
                  position: "bottom"
                })
              }
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    addTag() {
      let _this = this
      if (!_this.form.companyName) {
        uni.showToast({
          icon: "none",
          title: "請輸入公司名",
          position: "bottom"
        })
        return
      }
      if (!_this.form.companyLangitude) {
        uni.showToast({
          icon: "none",
          title: "请选择地址",
          position: "bottom"
        })
        return
      }
      if (_this.form.id) {
        _this.$post('/sale/wx/business_company/update_data', { ..._this.form, customerId: id }, true).then(res => {
          if (res.code * 1 === 200) {
            uni.showToast({
              icon: "none",
              title: "修改成功",
              position: "bottom"
            })
            _this.$refs.popup.close()
            _this.getTagList()

          }
        })
        return
      }
      _this.$post('/sale/wx/business_company/add_data', { ..._this.form, customerId: id }, true).then(res => {
        if (res.code * 1 === 200) {
          uni.showToast({
            icon: "none",
            title: "添加成功",
            position: "bottom"
          })
          _this.$refs.popup.close()
          _this.getTagList()

        }
      })

    },
    /**检验地址权限*/
    chooseAdress() {
      let vm = this
      uni.getSetting({
        success: (res) => {
          if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
            uni.showModal({
              title: '',
              content: '需要获取你的地理位置，请确认授权',
              success: function (res) {
                if (res.cancel) {
                  uni.showToast({
                    title: '拒绝授权',
                    icon: 'none'
                  })
                } else if (res.confirm) {
                  uni.openSetting({
                    success: function (dataAu) {
                      if (dataAu.authSetting["scope.userLocation"] == true) {
                        vm.getLocation(dataAu)
                      } else {
                        uni.showToast({
                          title: '授权失败',
                          icon: 'none'
                        })
                      }
                    }
                  })
                }
              }
            })
          }
          // 初始化进入，未授权
          else if (res.authSetting['scope.userLocation'] == undefined) {
            vm.getLocation(res)
          }
          // 已授权
          else if (res.authSetting['scope.userLocation']) {
            vm.getLocation(res)
          }
        }
      })
    },
    getLocation() {
      uni.chooseLocation({
        success: (res) => {
          this.form.companyLangitude = res.longitude
          this.form.companyLatitude = res.latitude
          this.form.companyAddress = res.address
        }
      })
    },
  }
}
</script>